<template>
  <div class="sidebar">
    <el-menu
      class="el-menu-vertical-demo"
      :default-active="onRoutes"
      :collapse="false"
      background-color="#F7F7F7"
      text-color="#000000"
      active-text-color="rgb(255,255,255)"
      :unique-opened="true"
      router
    >
      <!-- 循环渲染侧边导航栏-->
      <template v-for="(item, i) in items">
        <el-menu-item-group :index="item.index" :key="i">
          <el-menu-item :key="i * 10" :index="item.index">
            <div style="margin-left: 10px;">
              <i :class="item.icon"></i>{{ item.title }}
            </div>
          </el-menu-item>
          <el-menu-item
            v-for="(subItem, i) in item.subs"
            :key="i * 100"
            :index="subItem.index"
          >
            <div style="margin-left: 25px;">{{ subItem.title }}</div>
          </el-menu-item>
        </el-menu-item-group>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    //密码验证规则，保证两次输入的内容一致
    return {
      //collapse: false,
      items: [
        {
          icon: "el-icon-setting",
          index: "HomePage",
          title: "首页",
          subs: [],
        },
        {
          icon: "el-icon-tickets",
          index: "HealthTableSubmit",
          title: "填写健康状况表",
          subs: [],
        },
        {
          icon: "el-icon-document",
          index: "PersonInfo",
          title: "个人信息",
          subs: [],
		},
		{
          icon: "el-icon-document",
          index: "IOTableSubmit",
          title: "填写进出状况表",
          subs: [],
		},
		{
          icon: "el-icon-document",
          index: "HealthTableQuery",
          title: "审查健康状况",
          subs: [],
		},
		{
          icon: "el-icon-document",
          index: "IOTableQuery",
          title: "审查进出状况",
          subs: [],
        },
      ],
    };
  },
  computed: {
    //点击时触发路由跳转
    onRoutes() {
      return this.$route.path.replace("/", "");
    },
  },
  methods: {},
};
</script>

<style>
/* 这里是个人信息的相关css表 */

.el-menu-vertical-demo {
  width: 200px;
}
</style>
